<template>
  <div
    class="relative flex flex-col justify-between px-6 py-8 transition-all duration-200 bg-white border border-transparent shadow-md cursor-pointer rounded-2xl dark:bg-gray-800 hover:border-blue-400 hover:shadow-xl hover:-translate-y-1 hover:bg-blue-50/40 dark:hover:bg-blue-900/30"
    @click="goDetail"
  >
    <div>
      
      <h2 class="flex justify-center gap-2 mb-2 text-xl font-bold"><span>{{ tool.icon }}</span>{{ tool.title }}</h2>
      <p class="mb-4 text-gray-500 dark:text-gray-300">{{ tool.description }}</p>
      <!-- <span class="inline-block px-2 py-1 text-xs text-blue-800 bg-blue-100 rounded">{{ tool.category }}</span> -->
      <div class="flex justify-center gap-2"><span v-for="tag in tool.tags" :key="tag" class="inline-block px-2 py-1 text-xs text-blue-800 bg-blue-100 rounded">{{ tag }}</span></div>
    </div>
    <button
      class="flex items-center self-end gap-1 mt-4 text-yellow-500 hover:text-yellow-600 focus:outline-none"
      :class="isFavorite ? 'font-bold' : 'opacity-60'"
      @click.stop="toggleFavorite"
    >
      <span v-if="isFavorite">★ 已收藏</span>
      <span v-else>☆ 收藏</span>
    </button>
  </div>
  <!-- ⭐  -->
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useToolsStore } from '../store/tools'
import type { Tool } from '../store/tools'
import { computed } from 'vue'

const props = defineProps<{
  tool: Tool
}>()

const router = useRouter()
const toolsStore = useToolsStore()
const isFavorite = computed(() => toolsStore.isFavorite(props.tool.id))

function toggleFavorite(event: Event) {
  event.preventDefault() // 阻止卡片点击事件
  toolsStore.toggleFavorite(props.tool.id)
}

function goDetail() {
  router.push(`/tool/${props.tool.id}`)
}
</script>